<template>
    <div class="add_hospital_page">
  
      <div class="nav_bar">
        <div class="back" @click="goBack">
          <span class="el-icon-arrow-left"></span>
          <span>返回</span>
        </div>
  
        <div class="top_menus">
          <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
        </div>
      </div>
  
      <!-- 第一步 基础信息 开始 -->
      <div class="content" v-show="step == 1">
        <el-form ref="addForm" :model="addForm" class="add_form" :rules="addFormRules" size="small" :label-width="labelWidth" :disabled="status == 3">
          <el-form-item label="医院名称：" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="医院类别：" prop="classId">
            <!-- <el-input v-model="addForm.classId"></el-input> -->
            <HospClass v-model="addForm.classId"></HospClass>
          </el-form-item>
          <el-form-item label="营业时间：" prop="businessTime">
            <el-input v-model="addForm.businessTime"></el-input>
          </el-form-item>
          <el-form-item label="成立时间：" prop="establishDate">
            <!-- <el-input v-model="addForm.establishDate">
              <template slot="append">年</template>
            </el-input> -->
            <div class="unit_box">
              <el-input-number v-model="addForm.establishDate" :controls="false" class="number_input"></el-input-number>
              <span class="unit_tips">年</span>
            </div>
          </el-form-item>
          <el-form-item label="门诊面积：">
            <el-input v-model="addForm.outpatientArea">
              <template slot="append">㎡</template>
            </el-input>
          </el-form-item>
          <el-form-item label="开展项目：">
            <el-select v-model="addForm.expertProject" filterable multiple multiple-limit="3" class="a_select">
              <el-option v-for="(item, index) in projectList" :key="index" :label="item.name" :value="item.id.toString()" />
            </el-select>
          </el-form-item>
          <el-form-item label="诊室数量：">
            <el-input v-model="addForm.outpatientRootCnt"><template slot="append">间</template></el-input>
          </el-form-item>
          <el-form-item label="牙椅数量：">
            <el-input v-model="addForm.toothChairCnt"><template slot="append">张</template></el-input>
          </el-form-item>
          <el-form-item label="医保政策：" prop="medicalInsurancePolicy">
            <el-radio-group v-model="addForm.medicalInsurancePolicy">
              <el-radio :label="1">支持医保</el-radio>
              <el-radio :label="0">不支持医保</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="前台电话：">
            <el-input v-model="addForm.receptionTel"></el-input>
          </el-form-item>
          <el-form-item label="特色标签：">
            <el-select v-model="addForm.featuredLabelId" multiple>
              <el-option v-for="(item, index) in labelList" :key="`label_${index}`" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="特色服务：">
            <el-select v-model="addForm.featuredServicesId" multiple>
              <el-option v-for="(item, index) in serviceList" :key="`service_${index}`" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店地址：" class="long_form_item is-required">
            <div class="address_box">
              <el-form-item prop="code" label-width="0">
                <area-select v-model="addForm.code" @change="onProvinceChange"></area-select>
              </el-form-item>
              <el-form-item prop="address" label-width="0">
                <el-input v-model.trim="addForm.address" placeholder="请输入详细地址" class="a_input" maxlength="100" />
              </el-form-item>
              <el-form-item label-width="0">
                <el-button type="primary" @click="searchEvent()">搜索地图</el-button>
              </el-form-item>
            </div>
            <address-map ref="addressMap" @change="onChange"></address-map>
          </el-form-item>
          <el-form-item label="医院简介：" class="long_form_item">
            <el-input type="textarea" v-model="addForm.introduce" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="医院logo：" class="long_form_item">
            <ImageUpload v-model="addForm.logo" tip="图片尺寸1:1,大小在1M以内"></ImageUpload>
          </el-form-item>
          <el-form-item label="环境图片：" class="long_form_item">
            <ImageUpload v-model="addForm.surroundingsPic" :limit="12" tip="图片尺寸3:2,大小在2M以内"></ImageUpload>
          </el-form-item>
          <el-form-item label="更多介绍：" class="long_form_item">
            <WangEditor v-model="addForm.outpatientIntroduce"></WangEditor>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" @click="nextStep(2)">保存，下一步</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 第一步 基础信息 end -->
  
      <!-- 第二步 医院资质 开始 -->
      <div class="content" v-show="step == 2">
        <el-form :model="addForm" class="" size="small" :label-width="labelWidth" :disabled="status == 3">
          <el-form-item label="关联医院资质：">
            <HospCertification v-model="addForm.qualificationId" @change="getCertification" :disabled="true"></HospCertification>
          </el-form-item>
  
          <div class="license_box">
            <el-form-item label="营业执照：">
              <ImageUpload class="license_upload" v-model="cerForm.businessLicense" :disabled="true"></ImageUpload>
            </el-form-item>
            <div class="license_info">
              <el-form-item label="营业期限：">
                <el-input v-model.trim="cerForm.businessTerm" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="统一社会编码：">
                <el-input v-model.trim="cerForm.businessLicenseNumber" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="法人：">
                <el-input v-model.trim="cerForm.legalPerson" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="注册资金：">
                <el-input v-model.trim="cerForm.registeredCapital" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="经营范围：">
                <el-input type="textarea" v-model.trim="cerForm.businessScope" resize="none" rows="5" class="a_area" :disabled="true"></el-input>
              </el-form-item>
            </div>
          </div>
  
          <div class="license_box">
            <el-form-item label="医疗许可证：">
              <ImageUpload class="license_upload" v-model="cerForm.practiceLicense" :disabled="true"></ImageUpload>
            </el-form-item>
            <div class="license_info">
              <el-form-item label="证件有效期：">
                <el-input v-model.trim="cerForm.licenseValidity" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="医院资质：">
                <el-input v-model.trim="cerForm.hospitalQualification" class="a_input" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="治疗科目：">
                <el-input type="textarea" v-model.trim="cerForm.treatmentSubject" resize="none" rows="5" class="a_area" :disabled="true"></el-input>
              </el-form-item>
            </div>
          </div>
  
          <el-form-item label="">
            <el-button type="primary" @click="nextStep(3)">保存，下一步</el-button>
          </el-form-item>
  
        </el-form>
      </div>
      <!-- 第二步 医院资质 end -->
  
      <!-- 第三步 预约信息 开始 -->
      <div class="content" v-show="step == 3">
        <el-form ref="thirdForm" :model="addForm" :rules="thirdFormRules" class="add_form" size="small" :label-width="labelWidth" :disabled="status == 3">
          <el-form-item label="是否开放预约：" prop="isOpened">
            <el-radio-group v-model="addForm.isOpened">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="商务负责人：" prop="principal">
            <user-select v-model="addForm.principal" :multiple="false"></user-select>
          </el-form-item>
          <el-form-item label="预约注意事项：" class="long_form_item">
            <el-input type="textarea" v-model.trim="addForm.attention" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="活动政策：" class="long_form_item">
            <el-input type="textarea" v-model.trim="addForm.activityPricingStrategy" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="预约紧急联系人：" class="long_form_item">
            <el-input type="textarea" v-model="addForm.emergencyContact" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="短信交通说明：" class="long_form_item" prop="smsContentConfig">
            <el-input type="textarea" v-model="addForm.smsContentConfig" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="预约交通指引：" class="long_form_item">
            <el-input type="textarea" v-model="addForm.trafficGuide" class="a_area" rows="5" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="门诊价目表：" class="long_form_item">
            <ImageUpload v-model="addForm.outpatientPriceList" :limit="6"></ImageUpload>
          </el-form-item>
          <el-form-item label="" class="long_form_item">
            <el-button type="primary" @click="nextStep(4)">保存，下一步</el-button>
          </el-form-item>
        </el-form>
  
      </div>
      <!-- 第三步 预约信息 end -->
  
      <!-- 第四步 平台运营 开始 -->
      <div class="content" v-show="step == 4">
        <el-form ref="secondForm" :rules="secondFormRules" :model="addForm" class="" size="small" :label-width="labelWidth" :disabled="status == 3">
          <el-form-item label="上架状态：" class="" prop="onShelf">
            <el-radio-group v-model="addForm.onShelf">
              <el-radio :label="1">上架</el-radio>
              <el-radio :label="2">下架可见</el-radio>
              <el-radio :label="0">下架不可见</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否首页：" class="" prop="homePageShow">
            <el-radio-group v-model="addForm.homePageShow">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否认证：" class="">
            <el-radio-group v-model="addForm.hasCertified">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="展示预约数：" class="" prop="initAppointmentCnt">
            <el-input v-model="addForm.initAppointmentCnt" class="a_input"></el-input>
          </el-form-item>
          <el-form-item label="展示评分：" class="" prop="initScore">
            <el-input v-model.number="addForm.initScore" max="5" class="a_input"></el-input>
          </el-form-item>
          <el-form-item label="排序时间：" class="" prop="orderTime">
            <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="seo标题：" class="" prop="seoTitle">
            <el-input v-model="addForm.seoTitle" class="a_input"></el-input>
          </el-form-item>
          <el-form-item label="seo关键词：" class="" prop="seoKeywords">
            <el-input type="textarea" v-model="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="seo描述：" class="" prop="seoDescription">
            <el-input type="textarea" v-model="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
          </el-form-item>
          <el-form-item label="" class="long_form_item">
            <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 第四步 平台运营 end -->
  
    </div>
  </template>
  <script>
  import AreaSelect from "@/components/province";
  import AddressMap from "@/components/map";
  import ImageUpload from "@/components/upload/upload.vue";
  import WangEditor from "@/components/wangEditor/index.vue";
  import HospCertification from "@/components/select/hosp_certification.vue";
  import HospClass from "@/components/select/hospClass.vue";
  import { GETPROJECTOPTIONS } from "@/http/system";
  import {
    GET_FEATUREDLABEL_OPTIONS,
    GET_FEATUREDSERVICES_OPTIONS,
    GET_HOSPITALCLASS_OPTIONS,
  } from "@/http/configuration";
  import { deepClone, showToast } from "@/common/util";
  import {
    ADDHOSPITALINFO,
    EDITHOSPITALINFO,
    GETHOSPITALINFO,
  } from "@/http/hospital";
  import { GET_QUALIFICATION_HOSPITAL_INFO } from "@/http/information";
  import { ADD_HOSPITAL_FIELD } from "@/common/constants";
  export default {
    components: {
      AreaSelect,
      AddressMap,
      ImageUpload,
      WangEditor,
      HospCertification,
      HospClass,
    },
    data() {
      return {
        menus: [
          { name: "基础信息", id: 1 },
          { name: "医院资质", id: 2 },
          { name: "预约信息", id: 3 },
          { name: "平台运营", id: 4 },
        ],
        step: 1,
        addForm: {},
        cerForm: {},
        labelWidth: "120px",
        projectList: [],
        loading: false,
        addFormRules: {
          name: [{ required: true, message: "请输入医院名称", trigger: "blur" }],
          classId: [
            { required: true, message: "请选择医院类别", trigger: "change" },
          ],
          businessTime: [
            { required: true, message: "请输入营业时间", trigger: "blur" },
          ],
          establishDate: [
            { required: true, message: "请输入成立时间", trigger: "blur" },
          ],
          medicalInsurancePolicy: [
            { required: true, message: "请选择医保政策", trigger: "change" },
          ],
          code: [{ required: true, message: "请选择省市区", trigger: "change" }],
          address: [
            { required: true, message: "请输入详细地址", trigger: "blur" },
          ],
        },
        secondFormRules: {
          onShelf: [
            { required: true, message: "请选择上架状态", trigger: "change" },
          ],
          homePageShow: [
            { required: true, message: "请选择上架状态", trigger: "change" },
          ],
          initAppointmentCnt: [
            { required: true, message: "请输入展示预约数", trigger: "blur" },
          ],
          initScore: [
            { required: true, message: "请输入展示评分", trigger: "blur" },
          ],
          orderTime: [
            { required: true, message: "请输入排序时间", trigger: "blur" },
          ],
          seoTitle: [
            { required: true, message: "请输入seo标题", trigger: "blur" },
          ],
          seoKeywords: [
            { required: true, message: "请输入seo关键词", trigger: "blur" },
          ],
          seoDescription: [
            { required: true, message: "请输入seo描述", trigger: "blur" },
          ],
        },
        thirdFormRules: {
          isOpened: [
            { required: true, message: "请选择是否开放预约", trigger: "change" },
          ],
          principal: [
            { required: true, message: "请选择商务负责人", trigger: "change" },
          ],
          smsContentConfig: [
            { required: true, message: "请输入短信交通说明", trigger: "blur" },
          ],
        },
        labelList: [],
        serviceList: [],
        status: "",
      };
    },
    created() {
      let query = this.$route.query;
      this.getService();
      this.getLabel();
      this.getProject();
      if (query.id) {
        this.getInfo(query.id);
      }
  
      /**
       * 新增：status：1
       * 编辑：status：2
       * 详情：status：3
       */
  
      this.status = query.status;
    },
    methods: {
      // 菜单点击事件
      menuEvent(row) {
        this.step = row.id;
      },
  
      // 返回上一页
      goBack() {
        this.$router.go("-1");
      },
  
      // 获取所有项目
      getProject() {
        GETPROJECTOPTIONS().then((res) => {
          this.projectList = res.data || [];
        });
      },
  
      // 下一步
      nextStep(num) {
        let step = this.step;
        let id = "addForm";
        if (step == 3) {
          id = "thirdForm";
        }
        if (step == 1 || step == 3) {
          this.$refs[id].validate((valid) => {
            if (!valid) {
              return false;
            }
            this.step += 1;
          });
          return false;
        }
        this.step = num;
      },
  
      // 获取参数
      getParams() {
        let o = deepClone(this.addForm);
  
        // 医院logo
        if (o.logo && o.logo.length) {
          o.logo = o.logo.toString();
        }
  
        // 环境图片
        if (o.surroundingsPic && o.surroundingsPic.length) {
          o.surroundingsPic = o.surroundingsPic.toString();
        }
  
        // 门诊价目表
        if (o.outpatientPriceList && o.outpatientPriceList.length) {
          o.outpatientPriceList = o.outpatientPriceList.toString();
        }
  
        // 开展项目
        if (o.expertProject) {
          o.expertProject = o.expertProject.toString();
        }
  
        // 省市区
        if (o.code && o.code.length) {
          o.province = o.code[0];
          o.city = o.code[1];
          o.district = o.code[2];
          delete o.code;
        }
        return o;
      },
  
      // 保存信息
      saveInfo() {
        let _this = this;
        let query = _this.$route.query;
        this.$refs.secondForm.validate((valid) => {
          if (!valid) {
            return false;
          }
          let oParams = _this.getParams();
          let callBack = ADDHOSPITALINFO;
          let msg = "新增成功";
          console.log(oParams);
          _this.loading = true;
  
          // 编辑
          if (query.id) {
            oParams.id = query.id;
            callBack = EDITHOSPITALINFO;
            msg = "编辑成功";
          }
  
          callBack(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: msg,
                type: "success",
              });
              _this.goBack();
            }
          });
        });
      },
  
      // 监听省市区
      onProvinceChange(e) {
        this.$set(this.addForm, "provinceName", e[0]);
        this.$set(this.addForm, "cityName", e[1]);
        this.$set(this.addForm, "districtName", e[2]);
      },
  
      // 监听地图变化
      onChange(e) {
        console.log(e);
        let code = e.code;
        let n = [code[0].substring(0, 2), code[1].substring(0, 4), code[2]];
        let m = e.name;
        //this.$set(this.addForm, "area", e.name);
        this.$set(this.addForm, "provinceName", m[0]);
        this.$set(this.addForm, "cityName", m[1]);
        this.$set(this.addForm, "districtName", m[2]);
  
        this.$set(this.addForm, "address", e.address);
        this.$set(this.addForm, "lng", e.lng);
        this.$set(this.addForm, "lat", e.lat);
        this.$set(this.addForm, "code", n);
        this.$refs.addForm.validateField("address");
        this.$refs.addForm.validateField("code");
      },
  
      // 搜索地图
      searchEvent() {
        let o = this.addForm;
        let keywords = o.address;
        if (keywords) {
          this.$refs.addressMap.mapSearchEvent(keywords);
        }
      },
  
      // 获取标签
      getLabel() {
        GET_FEATUREDLABEL_OPTIONS().then((res) => {
          this.labelList = res.data || [];
        });
      },
  
      // 获取特色服务
      getService() {
        GET_FEATUREDSERVICES_OPTIONS().then((res) => {
          this.serviceList = res.data || [];
        });
      },
  
      // 获取医院资质
      getCertification(id) {
        console.log(id);
        if (!id) {
          return false;
        }
        let oParams = {};
        oParams.id = id;
        GET_QUALIFICATION_HOSPITAL_INFO(oParams).then((res) => {
          this.cerForm = res.data || {};
        });
      },
  
      // 获取医院详情
      async getInfo(id) {
        let res = await GETHOSPITALINFO({ id: id });
        let obj = res.data || {};
        let hospital = obj.hospital || {};
        let appointment = obj.appointment || {};
        let surroundings = obj.surroundings || {};
        let result = { ...appointment, ...surroundings, ...hospital };
        let addForm = {};
        let list = ADD_HOSPITAL_FIELD;
  
        for (let k in result) {
          console.log(hospital[k]);
          let idx = list.findIndex((j) => j == k);
          if (idx >= 0 && (result[k] || result[k] == 0)) {
            addForm[k] = result[k];
          }
        }
        addForm.id = id;
        addForm.code = [addForm.province, addForm.city, addForm.district];
  
        // 医院logo
        if (addForm.logo) {
          addForm.logo = addForm.logo.split(",");
        }
  
        // 环境图片
        if (addForm.surroundingsPic) {
          addForm.surroundingsPic = addForm.surroundingsPic.split(",");
        }
  
        //医院资质
        if (addForm.qualificationId) {
          this.getCertification(addForm.qualificationId);
        }
  
        // 门诊价目表
        if (addForm.outpatientPriceList) {
          addForm.outpatientPriceList = addForm.outpatientPriceList.split(",");
        }
  
        if (addForm.expertProject) {
          addForm.expertProject = addForm.expertProject.split(",");
        }
  
        this.addForm = addForm;
        console.log(addForm);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  @import "@/assets/style/addHospital.scss";
  </style>